<template>
    <div>
        <AddRules ref="rules_ref" @getDataList="getDataList" />
        <ViewTrend ref="trend_ref"/>
        <div class="com_box">
            <div class="com_tab_content flexbox flexcenter flexbetween">
                <div class="com_tab_box flexbox flexcenter">
                    <div class="com_tab_item active">高成本素材</div>
                    <div class="com_tab_item" @click="selectTab(item)">掉量素材</div>
                </div>
                <el-button type="primary" size="small" icon="el-icon-plus" @click="addRules">规则设置</el-button>
            </div>
            <div class="sch_rank">
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <div class="reset_btn" @click="resetFun">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                </div>
            </div>
            <div class="sch_hight flexbox" v-if="showrank">
                <div class="flexbox flexcenter flex">
                    <span class="font_14 color_02">素材上传</span>
                    <el-date-picker style="width:216px;margin-left:8px" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" clearable size="small" @change="getDataList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <div class="rank_line" style="margin-left:12px"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">规则条件</span>
                            <span class="drop_title">{{queryInfo.types !==''?repeatSinge(statusList,queryInfo.types,'id','nickname'):'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-radio-group v-model="queryInfo.types" class="check_style" @change="getDataList(1)">
                                <el-radio :label="item.id" v-for="(item,index) in statusList" :key="index">
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-radio>
                            </el-radio-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>

        <div class="w_bg bd" style="margin-top:12px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="font_16 color_01 flexbox flexcenter strategy_head">素材列表</div>
            <div class="table_box">
                <el-table :data="tableData" class="com_table" height="700px">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:700px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="material_name" label="素材名称" min-width="450"></el-table-column>
                    <el-table-column prop="material_id" label="素材ID" min-width="200"></el-table-column>
                    <el-table-column prop="stat_cost" label="消耗" min-width="125">
                    </el-table-column>
                    <el-table-column prop="pay_order_amount" label="GMV" min-width="125">
                    </el-table-column>
                    <el-table-column prop="roi" label="ROI" min-width="125">
                    </el-table-column>
                    <el-table-column prop="examine" label="操作" width="150">
                        <template slot-scope="scope">
                            <el-link type="primary" :underline="false" @click="openTren(scope.row)">消耗详情</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page_box flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
import ViewTrend from './ViewTrend'
import AddRules from "./AddRules";
export default {
    components: {
        AddRules,
        ViewTrend
    },
    name: "",
    data() {
        return {
            showrank: true,
            loading: false,
            queryInfo: {
                page: 1,
                limit: 20,
                types: 1,
                query: "",
                date: [],
            },
            statusList: [
                {
                    id: 1,
                    nickname: "素材累计消耗/ROI",
                },
                {
                    id: 2,
                    nickname: "素材连续三天ROI",
                },
            ],
            total: 1,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {
        selectTab() {
            this.$router.push({
                path: "/lowlist",
            });
        },
        // 添加规则
        addRules() {
            this.$refs.rules_ref.getData(1);
        },

        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/materialv2/materialTallList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        // 单选
        repeatSinge(a, b, id, name) {
            let text = a
                .filter((item) => {
                    return item[id] == b;
                })
                .map((item) => {
                    return item[name];
                })
                .toString();
            return text;
        },

        // 多选
        repeatFind(b, a, id, name) {
            let arr = [];
            for (let i in b) {
                for (let o in a) {
                    if (b[i] == a[o][id]) {
                        arr.push(a[o][name]);
                    }
                }
            }
            return arr.toString();
        },

        // 清空筛选
        clearQuery(name, type) {
            if (type == 1) {
                this.queryInfo[name] = [];
            } else {
                this.queryInfo[name] = "";
            }
            this.getDataList(1);
        },

        // 打开详情
        openTren(row){
            this.$refs.trend_ref.getData(row)
        },

        // 重置
        resetFun() {
            this.queryInfo.types = 1;
            this.queryInfo.query = "";
            this.queryInfo.date = [];
            this.getDataList(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
};
</script>


<style scoped>
.table_box {
    padding-top: 0;
}
.reset_btn {
    margin: 0 12px;
    margin-left: 0;
}
</style>


